<template>
    <div class="all-appoint">

        <div class="appoint-top">
            <table class="table-common">
                <thead>
                <tr>
                    <th>接种者姓名</th>
                    <th>出生日期</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>接种证号</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{peopleInfo.name}}</td>
                    <td>{{peopleInfo.birthday}}</td>
                    <td>
                        <span v-if="peopleInfo.sex==true">女</span>
                        <span v-else>男</span>
                    </td>
                    <td>{{peopleInfo.realage}}</td>
                    <td>{{peopleInfo.serialnum?peopleInfo.serialnum:'-'}}</td>
                    <td>
                        <a @click="goInoculateHistory">
                            <span class="history-text">接种历史</span>
                            <img src="../../../static/images/right-arrow.png" class="right-arrow">
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <p class="title-cen">预约下次接种</p>

        <div class="table-vaccine">
            <div class="vaccine-select">
                <Button  :class="vaccinetype==1?'active':''"  @click="vaccineSelect(1)">一类疫苗</Button>
                <Button :class="vaccinetype==2?'active':''"   @click="vaccineSelect(2)">二类疫苗</Button>
            </div>
            <div class="month-con">
                <div class="month-age">月龄选择</div>
                <div class="age-btn-co">
                    <Button v-for="(item,index) in agesList" class="age-btn"
                            :class="age==item?'active':''"
                            @click="changeAge(item)">{{item}}</Button>
                </div>
            </div>
        </div>

        <div class="table-wrapper">
            <!--一类疫苗-->
            <div class="table-con" v-if="vaccinetype==1">
                <div class="table-points">
                    <table v-if="plansOneList.length>0">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>疫苗名称</th>
                            <th>剂次/总剂次</th>
                            <th>推荐时间</th>
                            <th>操作</th>
                            <th>选择</th>
                            <th>替代疫苗</th>
                            <th>剂次/总剂次</th>
                            <th>推荐时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in plansOneList" :key="index">
                            <input type="hidden" value=""   :class='`planidOne${index} planidOneA`' >
                            <input type="hidden" value=""   :class='`begintimeOne${index}  begintimeOneA`' >
                            <td>
                                <label class="check_label check_label-item ">
                                    <input type="checkbox"
                                           @click="plansOneClick(item,index,index)"
                                           :class='`plansOne${index}   plansOneTwo${index}  plansCheckboxOne`'
                                           class=" publish_accredit-dot">
                                    <span class="publish_accredit-dot-mark "></span>
                                </label>
                            </td>
                            <td>{{item.vaccinename}}</td>
                            <td>{{item.dose}}/{{item.totaldose}}</td>
                            <td >
                                <DatePicker type="date"
                                            v-model="item.begintime"
                                            format="yyyyMMdd"
                                            :class='`begintimeTtemOne${index}`'
                                            :ref="`DatePickerOne${index}`"
                                            style="width: 160px" :clearable="false"></DatePicker>
                            </td>
                            <td>
                                <Dropdown>
                                    <a href="javascript:void(0)">
                                        操作
                                        <Icon type="ios-arrow-down"></Icon>
                                    </a>
                                    <DropdownMenu slot="list">
                                        <DropdownItem @click.native="entry(item)">录入</DropdownItem>
                                        <DropdownItem @click.native="refuse(item,1)">拒种</DropdownItem>
                                        <DropdownItem @click.native="refuse(item,2)">禁忌</DropdownItem>
                                        <DropdownItem @click.native="refuse(item,3)">超期</DropdownItem>
                                        <DropdownItem @click.native="refuse(item,4)">替代</DropdownItem>
                                        <DropdownItem @click.native="refuse(item,5)">已患</DropdownItem>
                                        <DropdownItem @click.native="undo(item,index,index)">撤销</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </td>
                            <td>
                                <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">
                                    <label class="check_label check_label-item ">
                                        <input type="checkbox"
                                               @click="plansOneClick(group,index,index+'_'+groupIndex)"
                                               :class='`plansOne${index}_${groupIndex}  plansOneTwo${index}`'
                                               :ref="`plansOne${index}_${groupIndex}`"
                                               class=" publish_accredit-dot">
                                        <span class="publish_accredit-dot-mark "></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">{{group.vaccinename}}</div>
                            </td>
                            <td>
                                <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">{{group.dose}}/{{group.totaldose}}</div>
                            </td>
                            <td>
                                <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">
                                    <DatePicker type="date"
                                                v-model="group.begintime"
                                                format="yyyyMMdd"
                                                :ref="`DatePickerOne${index}_${groupIndex}`"
                                                :class='`begintimeTtemOne${index}_${groupIndex}`'
                                                style="width: 160px" :clearable="false"></DatePicker>
                                </div>
                            </td>
                            <td>
                                <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">
                                    <Dropdown>
                                        <a href="javascript:void(0)">
                                            操作
                                            <Icon type="ios-arrow-down"></Icon>
                                        </a>
                                        <DropdownMenu slot="list">
                                            <DropdownItem @click.native="entry(group)">录入</DropdownItem>
                                            <DropdownItem @click.native="refuse(group,1)">拒种</DropdownItem>
                                            <DropdownItem @click.native="refuse(group,2)">禁忌</DropdownItem>
                                            <DropdownItem @click.native="refuse(group,3)">超期</DropdownItem>
                                            <DropdownItem @click.native="refuse(group,4)">替代</DropdownItem>
                                            <DropdownItem @click.native="refuse(group,5)">已患</DropdownItem>
                                            <DropdownItem @click.native="undo(group,index,index+'_'+groupIndex)">撤销</DropdownItem>
                                        </DropdownMenu>
                                    </Dropdown>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div v-else>
                        <table>
                            <thead>
                            <tr>
                                <th>选择</th>
                                <th>疫苗名称</th>
                                <th>剂次/总剂次</th>
                                <th>推荐时间</th>
                                <th>操作</th>
                                <th>选择</th>
                                <th>替代疫苗</th>
                                <th>剂次/总剂次</th>
                                <th>推荐时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                        <div class="no-data">暂无数据</div>
                    </div>
                </div>
            </div>

            <!--二类疫苗-->
            <div class="table-con" v-if="vaccinetype==2">
                <div class="table-points" v-if="plansTwoList.length>0">
                    <table  v-for="(item,index) in plansTwoList">
                        <thead>
                        <tr>
                            <th colspan="5" class="agename">{{item.agename}}</th>
                        </tr>
                        <tr>
                            <th>选择</th>
                            <th>疫苗名称</th>
                            <th>剂次/总剂次</th>
                            <th>推荐时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(group,groupIndex) in item.plan" :key="groupIndex">
                            <td>
                                <label class="check_label check_label-item ">
                                    <input type="checkbox" class=" publish_accredit-dot"   ref="checkboxTwo"
                                           @click="secondVaccineChangeTwo(group,groupIndex)" />
                                    <span class="publish_accredit-dot-mark "></span>
                                </label>
                                <input type="hidden" :value="group.id" ref="planidTwo">
                            </td>
                            <td>{{group.vaccinename}}</td>
                            <td>{{group.dose}}/{{group.totaldose}}</td>
                            <td>
                                <DatePicker type="date"
                                            v-model="group.begintime"
                                            ref="datePickerTwo"
                                            format="yyyyMMdd"
                                            @on-change="begintimeChangeTwo(group,groupIndex)"
                                            style="width: 160px" :clearable="false"></DatePicker>
                            </td>
                            <td>
                                <Dropdown>
                                    <a href="javascript:void(0)">
                                        操作
                                        <Icon type="ios-arrow-down"></Icon>
                                    </a>
                                    <DropdownMenu slot="list">
                                        <DropdownItem @click.native="entry(group)">录入</DropdownItem>
                                        <DropdownItem @click.native="refuse(group,1)">拒种</DropdownItem>
                                        <DropdownItem @click.native="refuse(group,2)">禁忌</DropdownItem>
                                        <DropdownItem @click.native="refuse(group,3)">超期</DropdownItem>
                                        <DropdownItem @click.native="refuse(group,4)">替代</DropdownItem>
                                        <DropdownItem @click.native="refuse(group,5)">已患</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else>
                    <table>
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>疫苗名称</th>
                            <th>剂次/总剂次</th>
                            <th>推荐时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                    <div class="no-data">暂无数据</div>
                </div>
            </div>


        </div>

        <div class="btn-footer">
            <Button type="primary" class="save-btn-common" @click="saveSubmit">保存</Button>
            <Button class="cancel-btn-common">取消</Button>
        </div>

    </div>
</template>

<script>
    import { nextplanInoculate, refuseino,goset} from '@/api/inoculate/inoculate';
    import $ from 'jquery';

    export default {
        data () {
            return {
                vaccinetype: 1,
                age: null,
                peopleInfo: {},
                agesList: [],
                plansOneList: [],
                plansTwoList: [],

                formCustom: {
                    size: '',
                    peopleid: ''
                },

            };
        },
        mounted () {
            this.getData();
        },
        computed: {
            peopleid () {
                return this.$route.query.peopleid;
            },
            id () {
                return this.$route.query.id;
            }
        },
        methods: {
            vaccineSelect (val) {
                this.vaccinetype = val;
                this.getData();
                if(this.vaccinetype==1){
                    console.log($('.plansCheckboxOne'))
                }
            },
            changeAge (val) {
                this.age=val;
                this.getData();
                if (this.vaccinetype == 1) {
                    $('.plansCheckboxOne').prop('checked', false);
                    for (let i in $('.planidOneA')) {
                      console.log( $('.planidOneA')[i])
                    }

                    /*for (let i in $('.planidOneA')) {
                        $('.planidOneA')[i].defaultValue = '';
                    }
                    console.log($('.begintimeOneA'))
                    for (let i in $('.begintimeOneA')) {
                        $('.begintimeOneA')[i].defaultValue = '';
                    }*/
                }
            },
            getData () {
                nextplanInoculate({
                    peopleid: this.peopleid,
                    id: this.id,
                    vaccineType: this.vaccinetype,
                    age:this.age
                }).then((res) => {
                    if (res.data.error == 0){
                        this.peopleInfo = res.data.people;
                        this.plansOneList = res.data.plans;
                        this.plansTwoList=res.data.plans;
                        this.age=res.data.age;
                        this.agesList = res.data.ages;
                    }
                });
            },
            goInoculateHistory () {
                this.$router.push({path: '/home/inoculateHistory',query:{peopleid: this.peopleid,babyTypes:0}});
            },
            //  录入
            entry (val) {

            },
            //  拒种 等
            refuse (val, status) {
                refuseino({
                    peopleid: this.peopleInfo.id,
                    planid: val.id,
                    type: status
                }).then((res) => {
                    if (res.data.error == 0) {
                        this.getData();
                    }
                });
            },
          //  二类疫苗复选框
            secondVaccineChangeTwo(group,groupIndex){

            },
        //    二类疫苗选择时间
            begintimeChangeTwo(group,groupIndex){

            },
        //   保存提交
            saveSubmit () {
                let that = this;

                // 二类疫苗
                if (this.vaccinetype==2){
                    this.formCustom.peopleid=this.peopleInfo.id;

                    let planidArray=[];
                    let begintimeArray=[];

                    for(var i=0;i<this.$refs.checkboxTwo.length;i++){
                        if(this.$refs.checkboxTwo[i].checked == true){
                            planidArray.push(this.$refs.planidTwo[i].defaultValue);
                            begintimeArray.push(this.$refs.datePickerTwo[i].publicStringValue)
                        }
                    }

                    this.formCustom.size=planidArray.length;
                    for (var i = 1; i<planidArray.length+1;i++){
                        this.formCustom['planid'+i]=planidArray[i-1];
                        this.formCustom['orderIndexs'+i]='on';
                    }
                    for (var i=1;i<begintimeArray.length+1;i++){
                        this.formCustom['begintime'+i]=begintimeArray[i-1];
                    }

                    let form =Object.assign(this.formCustom);

                    goset(form).then((res) => {
                        if(res.data.error==0){
                            that.$Message.success({
                                content: res.data.message,
                                duration: 1,
                                onClose: function () {
                                    that.$router.push({path: 'registeredprocess'});
                                }
                            });
                        } else {
                            this.$Message.error(res.data.message);
                        }
                    });

                }else if(this.vaccinetype==1){
                    this.formCustom.peopleid=this.peopleInfo.id;

                    let planidArray=[];
                    let begintimeArray=[];

                    for(let i in $('.planidOneA')){
                        if($('.planidOneA')[i].defaultValue){
                            planidArray.push($('.planidOneA')[i].defaultValue)
                        }
                    }

                    for(let i in $('.begintimeOneA')){
                        if($('.begintimeOneA')[i].defaultValue){
                            begintimeArray.push($('.begintimeOneA')[i].defaultValue)
                        }
                    }

                    this.formCustom.size=planidArray.length;
                    for (var i = 1; i<planidArray.length+1;i++){
                        this.formCustom['planid'+i]=planidArray[i-1];
                        this.formCustom['orderIndexs'+i]='on';
                    }
                    for (var i=1;i<begintimeArray.length+1;i++){
                        this.formCustom['begintime'+i]=begintimeArray[i-1];
                    }
                    let form =Object.assign(this.formCustom);
                    console.log(form)

                    goset(form).then((res) => {
                        if(res.data.error==0){
                            that.$Message.success({
                                content: res.data.message,
                                duration: 1,
                                onClose: function () {
                                    that.$router.push({path: 'registeredprocess'});
                                }
                            });
                        } else {
                            this.$Message.error(res.data.message);
                        }
                    });

                }
            },
            // 一类疫苗点击复选框
            plansOneClick(item,index,groupIndex){
                $('.plansOneTwo' + index).prop('checked',false);
                $('.plansOne' + groupIndex).prop('checked',true);
                $('.planidOne' + index)[0].defaultValue=item.id;

                for(let i in this.$refs){
                    if(i.split('DatePickerOne')[1]==groupIndex){
                        $('.begintimeOne' + index)[0].defaultValue=this.$refs[i][0].publicStringValue
                    }
                }

            },
          //  复选框撤销选中
            undo(item,index,groupIndex){
                $('.plansOneTwo' + index).prop('checked',false);
                $('.planidOne' + index)[0].defaultValue='';

                for(let i in this.$refs){
                    if(i.split('DatePickerOne')[1]==groupIndex){
                        $('.begintimeOne' + index)[0].defaultValue='';
                    }
                }

            }
        }
    }

</script>

<style lang="less">
    .all-appoint{
        .appoint-top{
            background: #fff;
            padding:20px 10px;
            .right-arrow{
                width:12px;
                height: 12px;
            }
            .history-text{
                color:#EF7575;
                margin-right: 8px;
                cursor: pointer;
            }
        }
        .title-cen{
            font-size:14px;
            color:rgba(53,76,107,1);
            margin:18px 0 7px;
        }
        .list-data{
            background: #fff;
            padding:20px 0;
            .condition{
                border-bottom: 1px dashed #D2D2D2;
                padding-left:10px;
                .label{
                    font-size: 14px;
                }
            }
        }
        .table-vaccine{
            background: #fff;
            padding-top:20px;
            .table-points{
                padding:20px 10px;
            }
            .vaccine-select{
                text-align: center;
                .ivu-btn{
                    width:161px;
                    height:44px;
                    background:rgba(209,217,238,1);
                    font-size:14px;
                    color:rgba(255,255,255,1);
                    border-radius:0;
                    &:nth-child(2){
                        margin-left:-5px;
                    }
                    &:focus{
                        box-shadow: none;
                    }
                    &:active{
                        border:none;
                    }
                    &.active{
                        background: #8A82F9;
                    }
                }
            }
        }
        .month-con{
            margin-top:10px;
            .month-age{
                height:38px;
                line-height: 38px;
                font-weight: normal;
                font-size:14px;
                background:rgba(93,140,254,1);
                color:rgba(255,255,255,1);
                padding-left:20px;
            }
            .age-btn-co{
                margin:6px 10px 0;
                .age-btn{
                    background:rgba(245,250,255,1);
                    border: none;
                    margin:0 6px 6px 0;
                    border-radius: 0;
                    font-size:14px;
                    color:rgba(151,172,224,1);
                    cursor: pointer;
                    &:focus{
                        box-shadow: none;
                    }
                    &.active{
                        background:rgba(239,117,117,1);
                        color:rgba(255,255,255,1);
                    }
                }
            }
        }
        .agename{
            text-align: left;
            padding-left:12px;
        }
    }
    .table-wrapper{
        margin-top:20px;
        background: #fff;
        .table-con{
            table{
                width:100%;
                text-align: center;
                font-size: 14px;
                border-collapse:collapse;
                margin-bottom: 20px;
                thead{
                    height:38px;
                    background:rgba(93,140,254,1);
                    font-size:14px;
                    font-family:PingFang-SC-Bold;
                    font-weight:bold;
                    color:rgba(255,255,255,1);
                    tr{
                        height:38px;
                        line-height: 38px;
                    }
                }
                tbody{
                    tr{
                        background:rgba(245,250,255,1);
                        td{
                            padding:15px 0;
                        }
                    }
                }
            }
            .table-btn{
                display: flex;
                margin-top:10px;
                .choose-vendor{
                    flex: 1;
                    background:rgba(93,140,254,1);
                    border-radius:6px;
                    color:rgba(255,255,255,1);
                    margin-right:12px;
                    font-size: 14px;
                }
                .btns{
                    .ivu-btn{
                        width:80px;
                        height: 38px;
                        background: #fff;
                        border:1px solid #5D8CFE;
                        color:#5D8CFE;
                        font-size: 14px;
                    }
                }
            }
        }
    }
    .btn-footer{
        text-align: center;
        margin-top:40px;
    }
</style>
